[<-- Anterior] [Volta para Sumário] [Proximo -->]

FUNDAMENTOS BÁSICOS HTML

----------------------------------------

HTML (HyperText Markup Language) é uma linguagem de marcação de texto utilizada para publicação no WWW. Consiste de rótulos que marcam trechos e blocos de texto que são utilizados por um visualizador HTML (ou browser) para formatar o documento e apresentá-lo na tela.

Como foi mencionado antes, para escrever HTML, não é necessário mais que um editor de textos. Pode-se usar, além do conjunto de caracteres básico do teclado, os caracteres do alfabeto ISO 8859-1 (ISO Latin-1). Desta forma, é possível escrever normalmente em português com acentos e cedilha, desde que seu editor de texto ou terminal permitam. Pode-se também, se necessário, utilizar o conjunto básico (US ASCII 7bit) e representar acentos, caracteres especiais e símbolos do alfabeto ISO Latin-1 usando seqüências de escape.

Esta parte abrange os seguintes tópicos:

Representação dos Elementos

Os elementos HTML são representados no texto através de rótulos (ou tags). O visualizador interpreta como rótulos todos os elementos HTML válidos que estejam entre < e >. Por exemplo: <BR> é interpretado como uma quebra de linha. <NHAC>, é ignorado e não aparece na página, pois não existe. Apesar de não aparecerem, elementos inválidos não devem ser usados para texto escondido. Existe uma marcação especial para comentários.

A maioria dos elementos HTML possuem um rótulo inicial e um rótulo final, envolvendo o texto que é marcado por eles. A sintaxe básica

<Elemento> Texto marcado por Elemento </Elemento>

Observe que o rótulo de fechamento tem o mesmo nome que o rótulo inicial, mas é precedido por uma barra ("/"). Alguns elementos podem ter um ou mais atributos, que definem alguma característica especial. Os atributos, quando presentes, aparecem no rótulo inicial separados por espaços, logo após o nome do elemento.

Exemplos de elementos HTML com atributos:

<BODY BACKGROUND="backgrounds/papel-de-parede.gif">... corpo do documento ... </BODY>

define uma imagem de fundo, disposta em mosaico, para a página.

<table border> ... conteúdo e rótulos de tabela ... </table>

define uma borda para a tabela.

<hr noshadow width=50% size=10 align=left>

define uma linha horizontal sem sombra, com largura de 50% da página, 10 pixels de espessura e alinhada pela esquerda.

Os caracteres "<" e ">", por definirem o início e final dos rótulos, só podem ser impressos na tela do visualizador HTML se forem referenciados através de uma seqüência de escape. Esta seqüência é indicada por um "&" seguido de uma abreviação e um ponto-e-vírgula, indicando o final da seqüência. As principais seqüências de escape, necessárias para produzir "<", ">", "&" e aspas (quando necessário) são: 



<&lt;

>&gt;

&&amp;

"&quot;

Toda a formatação da página é realizada exclusivamente com base na marcação do texto pelos elementos HTML. Somente através de elementos HTML pode-se quebrar uma linha, criar uma endentação, iniciar um novo parágrafo, etc. Qualquer formatação previamente realizada (exceto para texto rotulado com <PRE>) é ignorada. Espaços extras, tabulações, retornos, novas-linhas, etc. não são considerados. O exemplo a seguir ilustra esta característica:

Os três parágrafos... 

"No reino dos ares sou a liberdade;
entre os guerreiros sou a vitória;
entre os animais que habitam as águas sou o crocodilo;
entre os rios sou o Ganges."
(Bhagavad Gita)
	"No reino dos ares sou a liberdade;
	entre os guerreiros sou a vitória;
	entre os animais que habitam as águas sou o crocodilo;
	entre os rios sou o Ganges."
			(Bhagavad Gita)
No reino dos ares sou a liberdade;       entre os guerreiros
sou a vitória;       entre os animais que habitam as
águas sou o crocodilo;         entre os rios sou o Ganges.
   		            (Bhagavad Gita)

... serão formatados da mesma maneira pelo visualizador e ficarão assim:

"No reino dos ares sou a liberdade; entre os guerreiros sou a vitória; entre os animais que habitam as águas sou o crocodilo; entre os rios sou o Ganges." (Bhagavad Gita)

Também não importa se são utilizadas letras maiúsculas ou minúsculas para definir o rótulo, ou seja, tanto faz <BODY>, <body>, <Body> ou <bOdY>. Esta regra não vale, porém, para as URLs que podem ser referenciadas (entre aspas, geralmente) por atributos dentro dos rótulos.

[Volta para o início desta página]

Estrutura Hierárquica

A estrutura básica (mínima) de uma página HTML é a seguinte:

<!DOCTYPE HTML Public "-//IETF//DTD HTML//EN" -->
<HTML>
	<HEAD>
                <TITLE> Descrição do documento </TITLE>
		[elementos opcionais]
	</HEAD>
	<BODY>
		[texto e elementos HTML]
	</BODY>
</HTML>

A primeira linha: <!DOCTYPE HTML Public "-//IETF//DTD HTML//EN" --> é um rótulo SGML que informa ao visualizador que ele deve interpretar o documento de acordo com a definição de documento (DTD) tipo HTML genérico, aceitando os rótulos que ele conhece e ignorando os rótulos que ele não conhece. A maioria dos browsers atuais assume essa definição por default, na ausência da declaração acima.

O elemento <HTML>...</HTML> marca o início e o final do documento HTML. Deve conter duas sub-estruturas distintas: o cabeçalho, delimitado por <HEAD> e </HEAD>, e o corpo do documento, entre os rótulos <BODY> e </BODY>.

O bloco do cabeçalho, marcado por <HEAD> e </HEAD> pode conter informações sobre o conteúdo do documento utilizada para fins de indexação e organização. Não contém informação que será exibida na página.

<TITLE> é o único elemento obrigatório do bloco do cabeçalho. Deve conter o título do documento que aparece geralmente, fora da página, na barra de título do browser. O título deve conter informações que descrevam o documento. Não deve ser excessivamente longo nem muito curto a ponto de não conter informação suficiente. O seguinte exemplo é um bom título:

<TITLE>Tutorial sobre HTML: Introducao</TITLE>

enquanto que os dois seguintes são títulos ruins:

<TITLE>Introducao</TITLE>

<TITLE>Introducao ao HTML abrangendo recursos de listas, tabelas, formulários e interface CGI, com exemplos de utilização e exercícios. Abrange HTML 2.0, HTML+, HTML 3.0 e Extensões do Netscape. Escrito por fulano de tal em 31 de fevereiro de 1996. Blá blá bla...</TITLE>

O bloco marcado por <BODY> e </BODY> contém a parte do documento onde será colocada a informação que efetivamente será mostrada e formatada na tela pelo browser. Neste tutorial, todos os elementos que apresentaremos nas páginas a seguir, estarão dentro da estrutura de <BODY> (com exceção de <TITLE>, descrito acima, que fica em <HEAD>).

[Volta para o início desta página]

[<-- Anterior] [Volta para Sumário] [Proximo -->]